<template>
  <view
    class="adminContent"
    :style="{
      height: getHeight,
    }"
    :class="[getHomeClass]"
  >
    <slot></slot>
    <view v-show="!isToggle" class="scroll">
      <pageNotice :notice="data.notice" v-if="data.notice.length"></pageNotice>

      <view class="adminList order">
        <view
          class="item"
          v-for="item of data.orderList"
          :key="item.id"
          :class="[getClass(item.id)]"
        >
          <view class="box num">{{ item.num }}</view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>

      <view class="adminList menus">
        <view
          class="item"
          v-for="(item, index) of getMenu"
          :key="index"
          @click="goLink(item)"
        >
          <view class="box">
            <image class="img" :src="item.img" mode="aspectFill"></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>

      <!-- <view class="realTimeData">
        <view class="realTimeDataTit">{{ $t("newAdmin.home.home9") }}</view>

        <view class="realTimeDataBox">
          <view
            class="item"
            v-for="(item, index) of data.realTime"
            :key="index"
          >
            <view class="num">
              <view class="more" v-if="item.isMore">
                <view class="moreIcon"></view>
                <view class="moreIcon on"></view>
                <view class="moreIcon"></view>
              </view>
              <view v-else>{{ item.num }}</view>
            </view>
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view> -->
    </view>
    <view
      class="goHome"
      :class="[getHomeClass]"
      @click="$emit('isToggle', false)"
    >
      <view class="icon"><i class="iconfont icon-home-fill"></i></view>
      <view class="text">{{ $t("facePay.toHome") }}</view>
    </view>
  </view>
</template>

<script>
import pageNotice from "./page-notice.vue";
export default {
  components: {
    pageNotice,
  },

  data() {
    return {
      height: 0,
    };
  },

  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },

    info: {
      type: Object,
      default() {
        return {
          top: 0,
          height: "auto",
        };
      },
    },

    isToggle: {
      type: Boolean,
      default: false,
    },

    rules: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  methods: {
    goLink({ url, is }) {
      if (!is) {
        this.$utils.toast("敬请期待！");
        return;
      }
	  if(url=='scanCodeVerification'){
		  this.scan()
		  return
	  }
	  
      this.$utils.toUrl(url, "navigate");
    },
	scan() {
	  this.$u.throttle(() => {
	    uni.scanCode({
	      onlyFromCamera: false,
	      success: (res) => {
	        if (res.errMsg == "scanCode:ok") {
	          console.log('扫码完毕',res)
			  this.$utils.toUrl('/'+res.path);
	        }
	      }
	    });
	  }, 500);
	},
  },

  computed: {
    getHeight() {
      let { isToggle, info, height } = this;
      return !isToggle ? info.height : height;
    },

    getHomeClass() {
      return this.isToggle ? "on" : "";
    },

    getClass() {
      return (id) => {
        return id === 5 ? "on" : "";
      };
    },

    getMenu() {
      let rules = this.rules;
      let menus = this.data.menus;
      let new_menu = [],
        menus_index = 0;
      menus.forEach((e, i) => {
        if (rules.indexOf(e.key) !== -1) {
          new_menu[menus_index] = e;
          ++menus_index;
        }
      });
      return new_menu;
    },
  },

  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".goHome")
      .boundingClientRect((data) => {
        this.height = data.height + "px";
      })
      .exec();
  },
};
</script>

<style lang="less" scoped>
.adminContent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30rpx 24rpx calc(env(safe-area-inset-bottom) + 30rpx);
  border-radius: 32rpx 32rpx 0 0;
  background: #f8f8f8;
  transition: 0.4s all;

  &.on {
    padding-top: 0;
    padding-bottom: 0;
  }

  .scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.adminList {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;

  .item {
    width: 20%;
    text-align: center;
    padding: 10rpx 5rpx;

    &.on {
      .num {
        color: #f0250e;
      }
    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    overflow: hidden;
  }

  .num {
    font-size: 40rpx;
    color: #262626;
  }

  .img {
    width: 50rpx;
    height: 50rpx;
  }
}

.order {
  .name {
    color: #8c8c8c;
  }

  .item {
    width: 25%;
  }
}

.menus .name {
  color: #262626;
}

.realTimeData {
  margin-top: 50rpx;
  border-radius: 30rpx;
  background: #fff;
}

.realTimeDataTit {
  padding: 24rpx 24rpx 0;
  font-size: 36rpx;
  color: #262626;
  font-weight: bold;
}

.realTimeDataBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 44rpx;

  .item {
    width: 25%;
    padding: 28rpx 5rpx 0;
    overflow: hidden;
    text-align: center;
  }

  .num {
    height: 60rpx;
    line-height: 60rpx;
    overflow: hidden;
    font-size: 30rpx;
    color: #262626;
  }

  .name {
    font-size: 20rpx;
    color: #8c8c8c;
  }
}

.more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;

  .moreIcon {
    margin: 0 4rpx;
    width: 8rpx;
    height: 8rpx;
    background: #dddfe0;
    border-radius: 50%;

    &.on {
      background: #caccce;
    }
  }
}

.goHome {
  position: fixed;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0 calc(env(safe-area-inset-bottom) + 20rpx);

  &.on {
    position: static;
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: #fdf1f0;
  }

  .iconfont {
    color: #f0250e;
  }

  .text {
    font-size: 32rpx;
  }
}
</style>
